<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>佳寓水电费查询</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/css/mdui.min.css"
        integrity="sha384-cLRrMq39HOZdvE0j6yBojO4+1PrHfB7a9l5qLcmRm/fiWXYY+CndJPmyu5FV/9Tw"
        crossorigin="anonymous"
  />
  <link rel="stylesheet" href="assets/style.css">
</head>
<body class="mdui-theme-primary-indigo mdui-theme-accent-pink mdui-theme-layout-auto">

<div class="mdui-container">
  <div class="mdui-row">
    <div class="mdui-col-md-6 mdui-col-offset-md-3 mdui-col-sm-10 mdui-col-offset-sm-1">

      <div class="mdui-typo">
        <blockquote>
          <p>本站不会记录你的账号密码，你的认证信息均保存在 <code>Cookie</code> 中。<br/>
            因这些数据基本不会造成太大的改变，故本页面所有数据均会被缓存，缓存时间 <b>1 小时</b></p>
          <p>本站源码开源：<a href="https://github.com/PrintNow/jiayu-hydropower-query"
                       target="_blank">PrintNow/jiayu-hydropower-query</a>
          </p>
          <footer>2021-06-14 20:46</footer>
        </blockquote>
      </div>

      <!--登录账号容器-->
      <div class="login-wrap">
        <div class="mdui-panel-item mdui-panel-item-open">
          <div class="mdui-panel-item-header mdui-color-indigo">登录账号</div>
          <div class="mdui-panel-item-body">
            <!-- 固定标签 -->
            <div class="mdui-textfield mdui-textfield-floating-label">
              <i class="mdui-icon material-icons">account_circle</i>
              <label for="phone" class="mdui-textfield-label">手机号</label>
              <input id="phone" class="mdui-textfield-input" type="text"/>
            </div>

            <!-- 浮动标签、多行文本框 -->
            <div class="mdui-textfield mdui-textfield-floating-label">
              <i class="mdui-icon material-icons">lock</i>
              <label for="password" class="mdui-textfield-label">密码</label>
              <input id="password" class="mdui-textfield-input" type="password"/>
            </div>

            <div class="operate mdui-m-t-2">
              <button onclick="login(this)" class="mdui-btn mdui-btn-raised
              mdui-ripple mdui-color-theme-accent mdui-float-right">
                确认登录
              </button>
            </div>
          </div>
        </div>
      </div>

      <!--房间号选择容器-->
      <div class="room-list-wrap">
        <div class="mdui-panel-item mdui-panel-item-open">
          <div class="mdui-panel-item-header mdui-color-indigo">选择房间</div>
          <div class="mdui-panel-item-body">

            <form class="mdui-m-t-2">
              <!--仅作为参照-->
              <label class="mdui-radio mdui-hidden">
                <input type="radio" name="room-list"/>
                <i class="mdui-radio-icon"></i>
                <div class="room-item mdui-typo">
                  <div class="room-position">
                    佳寓·深圳奈雪店
                  </div>
                  <div class="room-id">
                    房间号：<a>666</a>
                  </div>
                </div>
              </label>
            </form>
          </div>
        </div>
      </div>

      <!--水电费显示容器-->
      <div class="hydropower-wrap">
        <div class="mdui-panel-item mdui-panel-item-open">
          <div class="mdui-panel-item-header mdui-color-indigo">可视化图表📈</div>
          <div class="mdui-panel-item-body">
            <!--电费显示区域-->
            <div id="electric-wrap">
            </div>

            <!--水费图标显示区域-->
            <div id="water-wrap mdui-hidden">
            </div>
          </div>
        </div>
      </div>

      <div class="mdui-card mdui-m-b-2">
        <div class="mdui-card-content">
          <p>本项目仅作学习交流，禁止用以商业以及非法用途</p>
          <p>如本项目侵犯了你的合法权益，请发送邮件至 <a>i@nowtime.cc</a> 与我取得联系</p>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/js/mdui.min.js"
        integrity="sha384-gCMZcshYKOGRX9r6wbDrvF+TcCCswSHFucUzUPwka+Gr+uHgjlYvkABr95TCOz3A"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"
        integrity="sha256-TI0rIaxop+pDlHNVI6kDCFvmpxNYUnVH/SMjknZ/W0Y=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
<script src="assets/echarts.theme.js"></script>
<!--suppress JSUnresolvedVariable -->
<script>const $ = mdui.$;</script>
<script src="assets/script.js"></script>
</body>
</html>